<script setup>
import {NotificationsOutlined} from '@vicons/material'
import {useThemeStore} from "@/stores/themeStore";
import {storeToRefs} from "pinia";
import {useLoginModalStore} from "@/stores/loginModalStore";

const themeStore = useThemeStore()
const {theme, isDarkTheme} = storeToRefs(themeStore)
const {changeTheme} = themeStore
//登录模态框共享资源的对象
const loginModalStore = useLoginModalStore()
//改变显示登录模态框的状态
const {changeLoginModalShowStatus} = loginModalStore



</script>

<template>
  <n-space align="center" justify="space-between" style="height: 100%;">
    <n-text>知科笔记</n-text>
    <!--      头像-->
    <n-space>
      <n-avatar
          round
          size="small"
          src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
          style="position: relative; top: 3px"
      />
      <!--            分割线-->
      <n-divider vertical style="position: relative; top: 5px"/>
      <!--            消息按钮-->

      <n-badge dot processing type="success" :offset="[-8,4]">
        <n-button circle tertiary>
          <n-icon size="18" :component="NotificationsOutlined"/>
        </n-button>
      </n-badge>
      <!--            主题按钮-->
      <n-button circle tertiary @click="changeTheme(!isDarkTheme)">
        <n-icon size="18" :component="theme.icon"/>
      </n-button>

      <!--            登录按钮-->
      <n-button tertiary type="primary" @click="changeLoginModalShowStatus(true)">登录</n-button>
    </n-space>
  </n-space>


</template>

